<template>
	<view class="container">
		<scroll-view class="scroll" scroll-y="true" refresher-enabled refresher-threshold="45" :refresher-triggered="refresherTriggered" @refresherrefresh='refresherrefresh'>
			<view class="list" v-if="list.length!=0">
				<view class="item" v-for="(item,index) in list" :key="item" @tap="previewImage(index)">
					<image :src="item.picUrl" mode=""></image>
					<view class="detail">
						<view class="name xjs-line-two">{{item.picName}}</view>
						<!-- <view class="num">{{item.num}}张</view> -->
					</view>
				</view>
			</view>
			<loadMore v-else :status="'empty'" />
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import api from '@/api'
import { onLoad } from '@dcloudio/uni-app'
import { getLocation } from '@/hooks/useFunction';
onLoad(async (e) => {
	studioId.value = e.studioId
	userId.value = e.userId?e.userId:''
	await getDetails()
})
const studioId = ref<number>(0)  //工作室id
const userId = ref<string>('')//陪宠师id
const list = ref<listType[]>([])
//获取详情
const getDetails = async() =>{
	let url = '/mall/studio/petsitter-team/getUserDetail'
	
	if(!userId.value){
		const locat: any = await getLocation();
		url = `/mall/studio/getStudioDetail/${studioId.value}?longitudes=${locat.longitude}&latitudes=${locat.latitude}`
	}
	
	api({
		method: 'get',
		url: url,
		data: {
			studioId: studioId.value,
			userId:userId.value
		}
	}).then(res=>{
		let img = userId.value?res.data.user.petRaisingPic:res.data.picJson
		list.value = JSON.parse(img)
		arrList.value = []
		list.value.forEach(item=>{
			arrList.value.push(item.picUrl)
		})
	})
	
}
let arrList = ref([])
const previewImage = (index:number) => {
      uni.previewImage({
        current: index,
        urls: arrList.value
      });
    }
const refresherTriggered = ref<boolean>(false)
//下拉刷新
const refresherrefresh = () =>{
	refresherTriggered.value = true
	getDetails()
	setTimeout(()=>{
		refresherTriggered.value = false
	},2000)
}

interface listType {
	id:number
	picUrl:string
}

</script>

<style lang="scss" scoped>
.container{
	width: 100vw;
	height: 100vh;
	line-height: 1;
	background-color: #fff;
	.scroll{
		width: 100%;
		height: 100vh;
		background-color: #F9F6F6;
		.list{
			padding:24rpx 24rpx 60rpx;
			box-sizing: border-box;
			@include flex(center,space-between);
			flex-wrap: wrap;
		}
	}
	.item{
		width: 340rpx;
		margin-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		image{
			width: 340rpx;
			height: 340rpx;
			border-radius: 24rpx 24rpx 0 0;
		}
		.detail{
			width: 100%;
			height: 120rpx;
			padding:0 24rpx 24rpx 24rpx;
			box-sizing: border-box;
		}
		.name{
			width: 100%;
			color: #1B2120;
			line-height: 32rpx;
			font-size: 28rpx;
			// height: 80rpx;
			font-weight: bold;
			margin: 32rpx 0 0;
			white-space: pre-wrap;
			word-break:break-all;
		}
		.num{
			color: #5C5E5E;
			font-size: 24rpx;
		}
	}
}
</style>
